<template>
	<!-- 领用明细列表 -->
	<view class="assetMain">
		<view class="assetList">
			<view class="assetListItem">
				<view class="itemHead">
					<view class="itemHeadTitle">
						{{detailInfo.applyUnitName}}
					</view>
					<view class="itemHeadState">
						{{detailInfo.statusCh?detailInfo.statusCh:'未知'}}
					</view>
				</view>
				<view class="itemContent">
					<view class="det-list" v-for="(item,index) in listData" :key='index' @click="toDetail(item)">
						
						<view class="det-list-title">
							<view class="det-title">{{item.assetName}}</view>
							<view class="itemHeadState2">
								{{item.statusCh?item.statusCh:'--'}}
							</view>
						</view>
						<view>资产类型：{{item.assetTypeName}}</view>
						<view>规格型号：{{item.specification}}</view>
						<view>申请数量：{{item.applyQty}}</view>
						<view>已实施数量：{{item.execQty}}</view>
						<!-- <view>期望日期：{{item.applyExpectDate}}</view> -->
						
						<view class="posi-icon" v-if="item.status != 10||item.status != 2">
							<text class="iconfont" style="color: #999;">&#xe8d4;</text>
						</view>
					</view>
				</view>
			</view>
	
		</view>
		<!-- 状态在待处理或者处理中的情况 -->
		<!-- <view class="bottom-btn" v-if="(detailInfo.status == 5||detailInfo.status == 6||detailInfo.status == 7)&&showExecFlag">
			<view class="buttons">
				<button class="applybtn color-y-bg" @click="toPut">实施&签收</button>
				
			</view>
		</view> -->
		<!-- <button class="applybtn color-b-bg" @click="toConfirm">已收到货物</button> -->
		<!-- <button class="applybtn color-g-bg" @click="qrSign">扫码签收</button> -->
	</view>
</template>

<script lang="ts">
	import {
		onPullDownRefresh,
		onReachBottom,
		onShow
	} from "@dcloudio/uni-app";
	import {
		defineComponent,
		ref,
		reactive
	} from 'vue'
	import {
		applyDetail,
		retrueData
	} from '@/common/api/assetAPI.ts'
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		fromSearch
	} from '@/common/util/tabSearchUse.ts'

	export default defineComponent({
		setup(props, {
			emit
		}) {
			const listData = ref(); //资产列表数据
			const applyId = ref(); //资产列表数据
			const remarks = ref();
			const detailInfo = ref({});

			// 触发下拉=>开启下拉
			onPullDownRefresh(() => {
				// uni.startPullDownRefresh(); //下拉开启
				getList(applyId.value);
			});

			function getList(assetApplyId) {
				applyId.value = assetApplyId
				applyDetail(assetApplyId).then((res: any) => {
					uni.stopPullDownRefresh(); //关闭下拉
					listData.value = res.data.dtls
					remarks.value = res.data.remarks
					detailInfo.value = res.data
				})
			}

			onLoad((par) => {
				if (par.assetApplyId) {
					getList(par.assetApplyId)
					// isShowExecBtn(par.assetApplyId)
					
				} else {
					uni.showToast({
						icon:"none",
						title:'数据获取失败！'
					})
				}
			})
			onShow(()=>{
				getList(applyId.value);
			})
			
			const searchParams = ref({
				status: "5,6,7,8,9,11",
				assetApplyType: 1,
				mainApplyId: null,
				assetApplyId: null,
				assetExecDtlId:null,
			}); //查询条件
			const matchRule = {
				status: 'in',
				assetApplyType: 'eq',
				mainApplyId: 'eq',
				assetApplyId: 'eq',
				assetExecDtlId:'eq',
			}; //匹配条件
			
			const toPutId=(assetApplyId)=>{
				uni.navigateTo({
					url: `/pages/assets/assetApply/putList?byAssetApplyId=${assetApplyId}`,
				})
			}
			const showExecFlag = ref(true)
			// 底部实施按钮
			const toPut = () => {
				uni.navigateTo({
					url: `/pages/assets/assetApply/putList?assetApplyId=${detailInfo.value.assetApplyId}`,
				})
			}
			// 判断是否需要显示下方实施按钮
			const isShowExecBtn = (assetApplyId)=>{
				searchParams.value.assetApplyId = assetApplyId
				console.log('---------',searchParams.value);
				// const params = Object.assign(fromSearch(searchParams.value, matchRule), {page:1,rows:20})
				// retrueData(params).then((res:any)=>{
				// 	if(res.code==0){
				// 		if(res.data.records.length>0){
				// 			showExecFlag.value = true
				// 		}else{
				// 			showExecFlag.value = false
				// 		}
				// 	}
					
				// })
			}
			
			const toDetail = (item)=>{
				searchParams.value.assetApplyId = item.assetApplyId
				const params = Object.assign(fromSearch(searchParams.value, matchRule), {page:1,rows:20})
				
				retrueData(params).then((res:any)=>{
					if(res.code==0){
						if(res.data.records.length>0){
							uni.navigateTo({
								url: `/pages/assets/assetApply/putList?byAssetApplyId=${item.assetApplyId}&status=${item.status}`,
							})
						}else{
							uni.showToast({
								icon:"none",
								title:'暂无明细！'
							})
						}
					}
					
				})
			}
			
			const toConfirm = () => {
				uni.navigateTo({
					url: `/pages/assets/assetApply/inList?assetApplyId=${detailInfo.value.assetApplyId}`,
				})
			}
			// 扫码签收
			const qrSign = () => {
				uni.scanCode({
					success: function(res) {
						console.log(res)
						if (res.scanType === 'QR_CODE') {
							//二维码扫描
							uni.navigateTo({
								url: '/pages/assets/assetApply/qrSign?qrCode=' + res.result,
							})
						}
					}
				});
			}
			return {
				detailInfo,
				listData,
				remarks,
				toPut,
				toPutId,
				toConfirm,
				qrSign,
				toDetail,
				showExecFlag
			}
		},
	})
</script>

<style scoped lang="scss">
	uni-page-body{
		overflow: hidden;
				// padding-bottom: 60px;
	}
	
	.assetMain {
		background-color: #eee;
		font-size: 14px;
		height: 92%;
		overflow: auto;
	}

	.assetNav {
		display: flex;
		flex-wrap: row nowrap;
		justify-content: space-around;
		padding: 15px;
		background-color: #fff;
	}

	.assetList {
		padding: 10px;
	}

	.itemHead {
		position: relative;
		background-color: #fff;
		padding: 2px;
		border-radius: 5px;
	}

	.assetListItem {
		margin-top: 15px;
		border-radius: 5px;
	}

	.assetListItem:first-child {
		margin-top: 0;
	}

	.itemHeadTitle {
		width: 80%;
		text-indent: 15px;
		height: 35px;
		line-height: 35px;
		font-weight: bold;
		color: #333;
		overflow: hidden;
		text-overflow: ellipsis;
		display:-webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.itemHeadState {
		position: absolute;
		right: 10px;
		top: 8px;
		display: inline-block;
		color: #f0a020;
		font-size: 11px;
		padding: 2px 12px;
		border-radius: 15px;
		border: 1px solid #f0a020;
	}
	.itemHeadState2 {
		// height: 22px;
		// line-height: 22px;
		// box-sizing: border-box;
		color: #f0a020;
		font-size: 11px;
		// padding: 2px 12px;
		border-radius: 15px;
		border: 1px solid #f0a020;
		padding: 0 12px;
	}

	.itemContent {
		font-size: 15px;
		box-sizing: border-box;
		border-bottom: 1px solid #eee;
		
	}
	.conCenter,.det-list{
		line-height: 25px;
		color: #666;
	}
	.det-list{
		position: relative;
		margin-top: 10px;
		width: 95%;
		padding: 10px;
		background-color: #fff;
		border-radius: 10px;
		
	}
	.det-list-title{
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #ddd;
		align-items: center;
		padding-bottom: 5px;
	}
	.det-title{
		color: #333;
		font-weight: bold;
		font-size: 16px;
		padding-bottom: 3px;
	}
	.posi-icon{
		position: absolute;
		top: 100px;
		right: 30px;
	}
	.itemHand {
		padding: 15px;
		display: flex;
		justify-content: flex-end;
	}

	.itemHand>view {
		padding: 4px 23px;
		margin-right: 15px;
	}

	.buttons {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-around;
	}
	.applybtn{
		width: 60%;
		border-radius: 30px;
		line-height: 30px;
		font-size: 14px;
	}

</style>
